<template>
  <view class="goods-shopping-cart-box" @click="emit('shutDown', '')">
    <view class="bottomMenu-box-content">
      <view class="bottomMenu-box-content-body" @click.stop="">

        <view class="goods-shopping-cart-content-box">

          <!-- 商品编号 -->
          <text v-if="props.goodsSpecification[cartChooseSize]"
            style="color: rgb(184, 182, 182);font-size: 26rpx;">商品编号：{{ 
            }}</text>

          <!-- 商品预览 -->
          <view class="goods-shopping-cart-preview">
            <image v-if="props.goodsSpecification[cartChooseSize]"
              :src="props.goodsSpecification[cartChooseSize].commodity_specification_image" mode="aspectFill" @click="preview" />
            <view class="goods-shopping-cart-preview-type">
              <view class="goods-shopping-cart-preview-price">
                <text style="font-size: 26rpx;">￥</text>
                <text v-if="props.goodsSpecification[cartChooseSize]">{{
                  props.goodsSpecification[cartChooseSize].commodity_specification_price }}</text>
              </view>
              <view>
                <text>剩余</text>
                <text v-if="props.goodsSpecification[cartChooseSize]" style="color: red;margin: 0 10rpx;">{{
                  props.goodsSpecification[cartChooseSize].commodity_specification_inventory }}</text>
                <text>件</text>
              </view>
              <text>请选择 规格</text>
            </view>
          </view>

          <!-- 商品规格选项 -->
          <view style="margin: 20rpx 0;">
            <view style="font-size: 28rpx;">规格</view>
            <view class="" :class="cartChooseSize === index ? 'goods-shopping-cart-specification-item-chose goods-shopping-cart-specification-item' :
              'goods-shopping-cart-specification-item'" v-for="(item, index) in props.goodsSpecification"
              :key="index" @click="cartChooseSize = index;">
              <image :src="item.commodity_specification_image" mode="aspectFill" />
              <text>{{ item.commodity_specification_type }}</text>
            </view>
          </view>

          <!-- 商品数量 -->
          <view class="goods-shopping-cart-size">
            <text>数量</text>
            <view class="goods-shopping-cart-size-operate">
              <text @click="(cartSize--) > 1 ? cartSize : cartSize = 1">-</text>
              <view>{{ cartSize }}</view>
              <text @click="(cartSize++) < 99 ? cartSize : cartSize = 99">+</text>
            </view>
          </view>

        </view>

        <!-- 确认加入购物车 -->
        <view @click.stop="specificationSumbit" class="goods-shopping-know">加入购物车</view>

      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import type { GoodsSpecification } from "../../../config/data/data"
import { onMounted, defineEmits, defineProps, ref } from "vue"


const emit = defineEmits(['shutDown', "selectProduct"])

//当前选择商品规格下标
const cartChooseSize = ref(0);

//当前选择商品数量
const cartSize = ref(1);

//接受的数据:商品规格数据
const props = defineProps<{ goodsSpecification: GoodsSpecification[] }>();

//图片放大预览
const preview = () => {
  uni.previewImage({
    current: cartChooseSize.value,
    loop: true,
    urls: props.goodsSpecification.map(item => item.commodity_specification_image),
    indicator: 'default'
  })
}

//提交事件
const specificationSumbit = () => {
  emit('selectProduct', cartChooseSize.value, cartSize.value);
  emit('shutDown', '')
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {

});
// 组件周期函数--监听组件数据更新之前
// beforeUpdate() {},
// // 组件周期函数--监听组件数据更新之后
// updated() {},
// // 组件周期函数--监听组件激活(显示)
// activated() {},
// // 组件周期函数--监听组件停用(隐藏)
// deactivated() {},
// // 组件周期函数--监听组件销毁之前
// beforeDestroy() {},

</script>

<style scoped lang="scss">
image {
  object-fit: cover;
}

.goods-shopping-cart-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0d0d0da8;
  z-index: 10;
  display: flex;
  justify-content: center;

  .bottomMenu-box-content {
    height: 100vh;
    width: 100%;
    position: relative;


    .bottomMenu-box-content-body {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      min-height: 50vh;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: $uni-box-color;
      animation: identifier .2s ease 0s 1 forwards;

      .goods-shopping-cart-content-box {
        width: 90%;
        height: 100%;
        overflow: auto;
        margin: 20rpx;

        .goods-shopping-cart-size {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 27rpx;

          .goods-shopping-cart-size-operate {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;

            text,
            view {
              width: 50rpx;
              height: 50rpx;
              text-align: center;
              line-height: 50rpx;
              border-radius: 2rpx;
              background-color: #d7d5d553;
            }

            view {
              margin: 0 15rpx;
              width: 80rpx;
            }

          }
        }

        .goods-shopping-cart-specification-item {
          display: inline-flex;
          align-items: center;
          font-size: 24rpx;
          height: 45rpx;
          line-height: 45rpx;
          padding: 8rpx 12rpx;
          background-color: rgba(235, 233, 233, 0.3);
          border-radius: 3rpx;
          margin: 10rpx;



          image {
            width: 40rpx;
            height: 40rpx;
         
          }
        }

        .goods-shopping-cart-specification-item-chose {
          background-color: rgba(241, 126, 126, 0.307) !important;
          color: rgb(185, 5, 5);
        }

        .goods-shopping-cart-preview {
          display: flex;

          .goods-shopping-cart-preview-type {
            display: flex;
            flex-direction: column;
            margin-top: auto;
            font-size: 26rpx;
            color: $uni-bg-color-mask;

            .goods-shopping-cart-preview-price {
              color: red;
              font-size: 30rpx;
            }
          }

          image {
            width: 180rpx;
            height: 180rpx;
            margin-right: 20rpx;
          }
        }

        .goods-server-content {
          width: 100%;
          font-size: 28rpx;
          display: flex;
          flex-direction: column;
          margin: 10rpx 0 30rpx;
          letter-spacing: 2rpx;

          .goods-server-content-title {
            color: #111111;
            margin: 10rpx 0;
          }

          .goods-server-content-body {
            font-size: 25rpx;
            color: $uni-bg-color-mask;
          }
        }
      }

      .goods-shopping-know {
        width: 90%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 40rpx;
        color: $uni-box-color;
        margin: 20rpx 0;
        margin-top: auto;
        background-color: red;

        &:hover {
          opacity: .8;
        }
      }
    }


  }


  @keyframes identifier {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0);
    }

  }
}</style>